<template>
    <div class="wrap">
        <div class="head-conditions">
            <el-autocomplete
                    v-model="dynamic.phone"
                    :fetch-suggestions="querySearchPhoneAsync"
                    placeholder="请输入手机号"
                    @select="handleSelect"
            ></el-autocomplete>
            <el-autocomplete
                    v-model="dynamic.name"
                    :fetch-suggestions="querySearchGoodsIdAsync"
                    placeholder="请输入商品名"
                    @select="handleSelect"
            ></el-autocomplete>
            <el-button type="primary" @click="selectByCondition" icon="el-icon-search"
                       style="float: right;margin-left: 35px">查询
            </el-button>
        </div>
        <div class="table-main">
            <el-table
                    style="margin-top: 20px"
                    ref="filterTable"
                    :data="tableData"
                    border
                    :cell-style="rowStyle">
                <el-table-column
                        prop="goodsName"
                        label="商品名称"
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="goods.price"
                        label="售价"
                        width="100"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="订单时间"
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="订单数量"
                        width="80"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="140"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="cost"
                        label="价格(￥)"
                        width="120"
                        header-align="center">
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getByDynamic, getAllGoodsNames, getAllPhone} from '@/utils/apis/goods'
    import filter from "@/utils/filter";

    export default {
        name: "GoodsOrder",
        data() {
            return {
                tableData: [],
                current: 1,
                total: 0,
                //搜索条件
                dynamic: {
                    phone: null,
                    id: ''
                },
                goodsNameOptions: [],
                phoneOptions: [],
                // restaurants: [],
                // state: '',
                timeout: null
            }
        },
        created() {
            this.initData()
        },
        methods: {
            //初始化数据
            initData() {
                const loading = this.$loading({
                    lock: false,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.handleCurrentChange(1)
                this.getPhones()
                this.getAllGoods()
                loading.close()
            },
            //切换页数
            async handleCurrentChange(val) {
                this.current = val
                await getByDynamic(this.dynamic, this.current, 10).then(res => {
                    this.updateFormData(res.data.data)
                })
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            updateFormData(val) {
                this.total = val.total
                val.records.forEach(item => {
                    item.time = filter.formatDate(item.time, 'yyyy-MM-dd')
                })
                this.tableData = val.records
            },
            //条件查询
            selectByCondition() {
                if (this.dynamic.phone === '')
                    this.dynamic.phone = null
                else if (this.dynamic.goodsId === '')
                    this.dynamic.goodsId = null
                this.current = 1
                getByDynamic(this.dynamic, this.current, 10).then(res => {
                    this.updateFormData(res.data.data)
                })
            },
            //获取所有器材名称
            getAllGoods() {
                getAllGoodsNames().then(res => [
                    this.goodsNameOptions = res.data.data,
                ])
            },
            querySearchGoodsIdAsync(queryString, cb) {
                var goodsNameOptions = this.goodsNameOptions;
                var results = queryString ? goodsNameOptions.filter(this.createDynamicGoodsIdFilter(queryString)) : goodsNameOptions;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createDynamicGoodsIdFilter(queryString) {
                return (dynamic) => {
                    return (dynamic.name.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            //获取所有订单手机号
            getPhones() {
                getAllPhone().then(res => {
                    this.phoneOptions = res.data.data;
                })
            },
            querySearchPhoneAsync(queryString, cb) {
                var phoneOptions = this.phoneOptions;
                var results = queryString ? phoneOptions.filter(this.createDynamicPhoneFilter(queryString)) : phoneOptions;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createDynamicPhoneFilter(queryString) {
                return (dynamic) => {
                    return (dynamic.phone.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            }

        },

    }
</script>

<style scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .head-conditions {
        display: flex;
        justify-content: start;
    }

    .table-main {
        width: 761px;
    }

    .block {
        margin-top: 25px;
    }
</style>